import { useState, useEffect } from 'react';
import { CommentCount } from './components/CommentCount';
import { Tabs } from './components/Tabs';
import { Forms } from './components/Forms';
import { CommentList } from './components/CommentList';
import { http } from '../utils/http';

// 导入样式
import './App.css';

export const App = (props) => {
  // 组件数据
  // 排序类型数据
  const [tabs, setTabs] = useState([
    {
      id: 1,
      name: '热度',
      type: 'hot',
    },
    {
      id: 2,
      name: '时间',
      type: 'time',
    },
  ]);

  // 排序选中状态
  const [active, setActive] = useState('hot');

  // 评论列表数据
  const [list, setList] = useState([]);

  // 定义排序事件处理函数，传递给子组件
  const changeTab = (type) => {
    console.log('最新的排序类型', type);
    // 重新排序
    if (type === 'hot') {
      const newList = list.sort((a, b) => {
        // a - b 是升序, b -a 是降序
        return b.id - a.id;
      });
      // 设置页面数据
      setActive(type);
      setList(newList);
    } else {
      const newList = list.sort((a, b) => {
        // a - b 是升序, b -a 是降序
        return b.time.getTime() - a.time.getTime();
      });
      // 设置页面数据
      setActive(type);
      setList(newList);
    }
  };

  // 删除评论的事件处理函数
  const delComment = (id) => {
    console.log('删除评论的id', id);
    // 过滤删除的评论
    const newList = list.filter((item) => item.id !== id);
    // 设置页面数据
    setList(newList);
  };

  // 定义点赞或踩的事件处理函数
  const changeAttitude = (id, attitude) => {
    console.log('点赞或踩', id, attitude);
    // 生成最新的列表
    const newList = list.map((item) => {
      if (item.id === id) {
        return { ...item, attitude: attitude };
      }
      return item;
    });

    // 设置页面数据
    setList(newList);
  };

  // 获取评论内容
  const addComment = async (comment) => {
    console.log('用户输入的评论', comment);
    // 组装评论列表数据
    const newComment = {
      // id: Date.now(),
      author: 'xxx',
      comment: comment,
      time: new Date(),
      attitude: 0,
    };

    // 发表评论到服务器
    const res = await http.post('/list', newComment);
    console.log(res);

    // 重新获取评论列表数据
    const res2 = await http.get('/list');
    setList(res2.data);

    // 设置页面list数据
    // setList([newComment, ...list]);
  };

  // 页面渲染完毕发起请求
  // useEffect 第二个参数 []
  useEffect(() => {
    console.log('组件渲染完毕');
    // // 初始化 评论列表 数据
    // const list = JSON.parse(localStorage.getItem('list') || '[]');
    // // 设置页面数据
    // setList(list);
    // 从服务器端获取数据了
    const fetchData = async () => {
      const res = await http.get('/list');
      console.log(res.data);
      setList(res.data);
    };
    fetchData();
  }, []);

  // 每当 list 数据变化页面更新完毕后，保存list数据到本地
  // useEffect(() => {
  //   console.log('list 数据变化后，且页面渲染完毕后');
  //   // 保存list 数据到本地
  //   localStorage.setItem('list', JSON.stringify(list));
  // }, [list]); // 第二个参数，依赖项是list

  // // 组件挂载完毕，读取数据（发起网络请求）
  // componentDidMount() {
  //   // 本地读取评论列表
  //   const list = JSON.parse(localStorage.getItem('list') || '[]');
  //   console.log(list);
  //   this.setState({
  //     list: list,
  //   });
  // }

  // // 更新（交互）阶段
  // componentDidUpdate() {
  //   console.log('数据改变且渲染完毕了');
  //   localStorage.setItem('list', JSON.stringify(this.state.list));
  // }

  return (
    <div className="comment-root">
      <div className="comment-container">
        {/* <h1>{this.props.children}</h1> */}
        <>{props.children}</>
        <CommentCount number={list.length} />
        <Tabs tabs={tabs} active={active} changeTab={changeTab} />
        {/* hooks api 函数式组件 */}
        <Forms addComment={addComment} />
        <CommentList
          list={list}
          delComment={delComment}
          changeAttitude={changeAttitude}
        />
        <>{props.children}</>
      </div>
    </div>
  );
};

export default App;
